<script setup>
	import { fillHeight } from '../../utils/system';
	import { userInfoAPI } from '../../api/api';
	import { ref } from 'vue';
	
	// h5拨打电话
	function contact() {
		uni.makePhoneCall({
			phoneNumber: '17681864716'
		})
	}
	
	// 查看下载toScore
	function toDownload() {
		uni.navigateTo({
			url: '/pages/classList/classList?type=download&name=我的下载'
		})
	}
	
	function toScore() {
		uni.navigateTo({
			url: '/pages/classList/classList?type=score&name=我的评分'
		})
	}
	
	
	
	const userInfo = ref({})
	async function getuserInfo() {
		const res = await userInfoAPI()
		// console.log(res);
		userInfo.value = res.data
	}
	
	getuserInfo()
</script>


<template>
	<view class="user-layout pageBg">
		<view class="" :style="{height: fillHeight() + 'PX'}">
			
		</view>
		<view class="user-info">
			<image src="/static/images/xxmLogo.png" mode="widthFix"></image>
			<view class="ip">
				{{userInfo.IP}}
			</view>
			<view class="address">
				来自于： {{userInfo.address?.city || userInfo.address?.province || userInfo.address?.country}}
			</view>
		</view>
		<view class="section">
			<view class="list">
				<view class="row" @click="toDownload">
					<view class="top">
						<uni-icons type="download-filled" size="20"></uni-icons>
						<text>我的下载</text>
					</view>
					<view class="bottom">
						<text>{{userInfo.downloadSize}}</text>
						<uni-icons type="right" color="#aaa" size="16"></uni-icons>
					</view>
				</view>
				<view class="row" @click="toScore">
					<view class="top">
						<uni-icons type="star-filled" size="20"></uni-icons>
						<text>我的评分</text>
					</view>
					<view class="bottom">
						<text>{{userInfo.scoreSize}}</text>
						<uni-icons type="right" color="#aaa" size="16"></uni-icons>
					</view>
				</view>
				<view class="row">
					<view class="top">
						<uni-icons type="chatboxes-filled" size="20"></uni-icons>
						<text>联系客服</text>
					</view>
					<view class="bottom">
						<text></text>
						<uni-icons type="right" color="#aaa" size="16"></uni-icons>
					</view>
					<!-- #ifdef MP -->
						<button open-type="contact">联系客服</button>
					<!-- #endif -->
					<!-- #ifdef H5 -->
						<button @click="contact">拨打电话</button>
					<!-- #endif -->
					<!-- #ifdef APP -->
					<button @click="contact">拨打电话</button>
					<!-- #endif -->
				</view>
			</view>
		</view>
		<view class="section">
			<view class="list">
				<navigator class="border" url="/pages/notice/detail?id=653507c6466d417a3718e94b&name=订阅更新">
					<view class="row">
						<view class="top">
							<uni-icons type="notification-filled" size="20"></uni-icons>
							<text>订阅更新</text>
						</view>
						<view class="bottom">
							<text></text>
							<uni-icons type="right" color="#aaa" size="16"></uni-icons>
						</view>
					</view>
				</navigator>
				<navigator url="/pages/notice/detail?id=6536358ce0ec19c8d67fbe82&name=常见问题">
					<view class="row">
						<view class="top">
							<uni-icons type="flag-filled" size="20"></uni-icons>
							<text>常见问题</text>
						</view>
						<view class="bottom">
							<text></text>
							<uni-icons type="right" color="#aaa" size="16"></uni-icons>
						</view>
					</view>
				</navigator>
			</view>
		</view>
	</view>
</template>


<style scoped lang='scss'>
	.user-layout{
		.user-info{
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			padding: 50rpx 0;
			image{
				width: 160rpx;
				height: 160rpx;
				border-radius: 50%;
			}
			.ip{
				font-size: 40rpx;
				padding: 20rpx 0 5rpx;
			}
			.address{
				font-size: 30rpx;
				color: #aaaaaa;
			}
		}
		.section{
			width: 690rpx;
			margin: 60rpx auto;
			border: 1rpx solid #eee;
			border-radius: 10rpx;
			box-shadow: 0 0 30rpx rgba(0, 0, 0, .05);
			.list{
				.border{
					border-bottom: 1rpx solid #eee;
					&:last-child{
						border-bottom: none;
					}
				}
				.row{
					display: flex;
					position: relative;
					justify-content: space-between;
					align-items: center;
					height: 100rpx;
					padding: 0 30rpx;
					.top{
						:deep() {
							.uni-icons{
								color: $brand-theme-color !important;
							}
						}
						text{
							font-size: 30rpx;
							color: #aaa;
							margin-left: 20rpx;
						}
					}
					.bottom{
						display: flex;
						align-items: center;
						text{
							color: #aaa;
							margin-right: 15rpx;
							font-size: 28rpx;
						}
					}
					button{
						position: absolute;
						left: 0;
						top: 0;
						width: 100%;
						height: 100rpx;
						opacity: 0;
					}
				}
			}
		}
	}
</style>
